<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
<head>
  
  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  
</head>
<body>

  <div class="page-group">
    <div class="page page-current" style="background: #fff;">
    
      <header class="bar bar-nav fs-header-small fs-header-small appoint-header" style="text-align: center;">
        <a href="${ctx.host}/profile/courses/${courseRound.id}" class="icon icon-left pull-left"></a>
        <h1 class="title">教练信息</h1>
      </header>
      
      <div class="content">
        <form class="coach-form" action="${ctx.host}/profile/courses/${courseRound.id}/appointment" method="POST">
        
          <input type="hidden" name="roundId" value="${courseRound.id}">
          <input type="hidden" name="siteId" value="${site.id}">
          <input type="hidden" name="day" value="<fmt:formatDate value="${currentDay}" pattern="yyyy-MM-dd"/>">
          <input type="hidden" name="areaType" value="${areaType}">
          <input type="hidden" name="coachId" value="${coach.id}">
          <input type="hidden" name="hour" value="">
          
          <div class="content-block coach-appointment no-margin">
            <div class="coach-cover">
              <img src="${cloud.prod}/${coach.profile.avatar}" class="protrait">
              <div class="coach-details">${coach.profile.realname}<br/>
                <c:forEach var="specialty" items="${coach.profile.specialtyArray}" varStatus="status">
                  &nbsp;&nbsp;<span class="coach-specilty coach-specilty-${status.index}">${specialty}</span>
                </c:forEach>
               </div>
            </div>
            <div class="coach-description">${coach.profile.description}</div>
          </div>
          
          <div class="buttons-tab appoint-tab appoint-scroll" style="position: static;">
            <fmt:formatDate var="currentDayYYYYMMDD" value="${currentDay}" pattern="yyyy-MM-dd"/>              
            <c:forEach var="weekDay" items="${weekDays}">
              <fmt:formatDate var="weekDayYYYYMMDD" value="${weekDay}" pattern="yyyy-MM-dd"/>
              <a href="${ctx.host}/profile/courses/${courseRound.id}/coaches/${coach.id}/appointment?site=${site.id}&areaType=${areaType}&day=<fmt:formatDate value="${weekDay}" pattern="yyyy-MM-dd" />" class="tab-item button ${currentDayYYYYMMDD eq weekDayYYYYMMDD ? 'active' : ''}">
                <small><fmt:formatDate value="${weekDay}" pattern="EEEE" /></small>
                <br style="height: 0px;">
                <span class="day">
                  <fmt:formatDate value="${weekDay}" pattern="MM月dd日" />
                </span>
              </a>            
            </c:forEach>
          </div>
            
          <div class="content-block appointment appointment-available" style="margin-top: .75rem;">
            
            <c:forEach var="appointTime" items="${appointTimes}" varStatus="status">
              <fmt:formatDate var="dayForHour" value="${currentDay}" pattern="yyyy-MM-dd"/>
              <c:set var="dayhour" value="${dayForHour}|${appointTime}"/>
              <c:set var="amount" value="${empty roomLimits[dayhour] ? '0' : roomLimit[dayhour]}"/>
              <c:choose>
                <c:when test="${scheduleMap.containsKey(appointTime)}">
                  <div class="item unavailable">
                    <a href="javascript:void(0);" data-date='<fmt:formatDate value="${currentDay}" pattern="yyyy/MM/dd" />' data-datevalue="<fmt:formatDate value="${currentDay}" pattern="yyyy-MM-dd" />" data-time="${appointTime}">
                      <p class="time">${appointTime} - ${appointTimeSupports[status.index]}<br/>
	                      <c:choose>
	                        <c:when test="${areaType == 'room'}">
	                          私人区域&nbsp;${site.roomLimit.roomLimit - amount}
	                        </c:when>
	                        <c:otherwise>
	                          ${site.fuxing ? '米域' : '公共区域' }&nbsp;${site.roomLimit.commonLimit - amount}                 
	                        </c:otherwise>
	                      </c:choose>
                      </p>
                      <p class="tips gray">已预约</p>
                    </a>
                  </div>
                </c:when>
                
                <c:when test="${restMap.containsKey(appointTime)}">
                  <div class="item full">
                    <a href="javascript:void(0);" data-date='<fmt:formatDate value="${currentDay}" pattern="yyyy/MM/dd" />' data-datevalue="<fmt:formatDate value="${currentDay}" pattern="yyyy-MM-dd" />" data-time="${appointTime}">
                      <p class="time">${appointTime} - ${appointTimeSupports[status.index]}<br/>
                        <c:choose>
                          <c:when test="${areaType == 'room'}">
                            私人区域&nbsp;${site.roomLimit.roomLimit - amount}
                          </c:when>
                          <c:otherwise>
                            ${currentSite.fuxing ? '米域' : '公共区域' }公共区域&nbsp;${site.roomLimit.commonLimit - amount}                 
                          </c:otherwise>
                        </c:choose>
                      </p>
                      <p class="tips color-red">${restMap[appointTime].coachRestType.description}</p>
                    </a>
                  </div>
                </c:when>
                
                <c:otherwise>
                  <div class="item available">
                    <a href="javascript:void(0);" data-date='<fmt:formatDate value="${currentDay}" pattern="yyyy/MM/dd" />' data-datevalue="<fmt:formatDate value="${currentDay}" pattern="yyyy-MM-dd" />" data-time="${appointTime}">
                      <p class="time">${appointTime} - ${appointTimeSupports[status.index]}<br/>
                        <c:choose>
                          <c:when test="${areaType == 'room'}">
                            私人区域&nbsp;${site.roomLimit.roomLimit - amount}
                          </c:when>
                          <c:otherwise>
                            ${site.fuxing ? '米域' : '公共区域' }&nbsp;${site.roomLimit.commonLimit - roomLimits[dayhour]}                 
                          </c:otherwise>
                        </c:choose>
                      </p>
                      <p class="tips color-green">可预约</p>
                    </a>
                  </div>
                </c:otherwise>
              </c:choose>
            </c:forEach>
            
          </div>
          <div class="submit-fixed clearfix hide" style="display: block;">
            <div class="area-type-select">
              <label>公共区域<input type="radio" name="areaSelectType" value="room"/></label>
              <label class="full disabled">私人区域(已满)<input type="radio" name="areaSelectType" value="common" disabled/></label>
            </div>
            <div style="margin-top: .25rem;">
              <span class="date">2017/07/18</span>&nbsp;&nbsp;<span class="hour">10:30</span>
              <button id="submit" class="button button-fill"  style="float:right;background-color: #333; color: #FFDE00; display: none;">确认</button>
            </div>
          </div>
            
        </form>
      </div>
        
    </div>
  </div>
  
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/course/coach-appointment.js" />
  <script type="text/javascript">
    var jsConfig = JSON.parse('${wechatJsConfig}')
    require(['page/course/coach-appointment'], function(page) {
      page.init({
        jsConfig: jsConfig,
        'roundId': '${courseRound.id}',
        'fuxing': '${currentSite.fuxing}'
      })
    })
  </script>
  
</body>
</html>